<template>
  <div class="course-message">
        <div class="course-div detaild">
            <router-link :to='{path:"/course-detail",query:{classId:item.classId}}'>
            <p class="course-title">
                <span class="course-tag">{{item.gradeName}}</span>
                <span class="class-name">{{item.className}}</span><em class="season">({{item.periodName}})</em></p>
            </router-link>
          <p class="course-teacher" v-if="showTeacher">
            <span>任教老师：{{item.teacherName}}</span>
          </p>
            <p class="course-mes">
                <img src="../../assets/img/home/calendar.png" />
                <span>{{item.startCourseTime | formatDate('MM月DD日')}}-{{item.endCourseTime | formatDate('MM月DD日')}}</span>
                <span v-if="startLecture&&endLecture">( 共{{item.lectureAmount}}讲 )</span>
            </p>
            <p class="course-mes">
                <img src="../../assets/img/home/clock.png" />
                <span>{{item.timeInterval || item.classDateTip}}  {{item.studyingTime}}</span>
            </p>
            <p class="course-mes">
                <template v-if="item.campusAddress || item.campusName">
                    <img src="../../assets/img/home/location.png" />
                    <span>{{item.campusAddress || item.campusName}}</span>
                </template>
                <span v-if="showMoney" class="money">
                    <em>¥</em>{{item.studyingFee|formatNumber(2)}}
                </span>
            </p>
            <p class="course-mes" v-if="startLecture&&endLecture">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiangci"></use>
                </svg>
                <span>报读讲次：{{startLecture }} ~ {{endLecture}}</span>
            </p>
            <!--<div v-if="item.classType==='1'" class="course-status">
                <span class="number">
                    <em>{{item.registrationNumber}}</em>/{{item.quotaMax}}
                </span>
                <span class="course-rest">
                    {{item.quotaMin}}人报名可开班
                </span>
                <span class="money">
                    ￥{{ item.studyingFee | formatNumber(2)}}
                </span>
            </div>
            <div v-else class="course-status">
                <span class="number">
                    还有<em>{{item.quota - item.regAmount}}</em>个名额
                </span>
                <span class="money">
                    ￥{{ item.studyingFee | formatNumber(2)}}
                </span>
            </div>-->
        </div>
  </div>
</template>

<script>
export default {
  name: 'course-message',
  props:{
    item: {

    },
    hasAddress: {

    },
    showTeacher: {
      default: false
    },
    showMoney: {
      default: false
    },
    startLecture:'',
    endLecture:'',
  },
  components: {
  },
  data: function () {
    return {
      title: '提示',
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@images:"../../assets/img";
.course-message{
    padding-bottom: 5rem;
    padding-top: 4rem;
    position: relative;
    background: white;
    display: flex;
    display: -webkit-flex;
}
.course-div{
    display: inline-block;
    font-size: 2.4rem;
    color: #646464;
    width: 100%;
}
.course-div.detail{
    flex: 1;
    -webkit-box-flex: 1;
}
.course-div.head{
    width: 20rem;
    text-align: center;
    position: relative;
}
.course-div.head .headImg{
    width: 12rem;
    height: 12rem;
    border-radius: 12rem;
    border: 2px solid #eee;
    /*margin-left: 3rem;*/
}
.course-div.head .diamond{
    position: absolute;
    top: 10rem;
    right: 4rem;
    width: 3.2rem;
}
.zhongchou{
    position: absolute;
    top: 0;
    right: 3rem;
    width: 5.2rem;
}
.course-title{
    /* font-size: 2.8rem; */
    /* line-height: 2.9rem; */
    /* height: 2.9rem; */
    color: #333333;
    margin-bottom: 2.4rem;
    line-height: 3.8rem;
}
.course-title .class-name{
    font-size: 3.6rem;
}
.course-title .course-tag{
    width: 6.8rem;
    height: 4rem;
    line-height: 3.4rem;
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
    background: url('@{images}/home/grade.png') no-repeat;
    background-size: 100%;
    float: left;
    margin-right: .5rem;
    margin-top: .2rem;
}
.course-title span{
    display: inline-block;
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-title em{
    color: #ff6600;
    font-size: 2.8rem;
    /* line-height: 2.8rem; */
    vertical-align: top;
    margin-left: 1rem;
}
.course-teacher{
    margin-top: -2.7rem;
}
.course-mes{
    font-size: 2.4rem;
    line-height: 2.4rem;
    height: 2.4rem;
    margin-top: 1.8rem;
    .icon{
        font-size:2.8rem;
    }
}
.course-mes span{
    vertical-align: top;
    position: relative;
    top: .2rem;
    margin-left: .6rem;
}
.course-mes img{
    width: 2.4rem;
}
.money {
  text-align: right;
  color: #ff544c;
  font-size: 3.6rem;
  font-weight: 500;
  padding-right: 3rem;
  /* border-top: 2px dashed #ddd; */
  /* margin-top: 2.6rem; */
  margin-bottom: -1.5rem;
  /* padding-top: 2rem; */
  float: right;
  em{
      font-size:3.2rem;
  }
}
.course-status{
    margin-top: 3rem;
    height: 7rem;
    line-height: 7rem;
    border-top: 2px dashed #f2f2f2;
}
.course-status .number em{
    color: #ff6600;
}
.course-status .course-rest{
    margin-left: 2rem;
}
.course-status .money{
    color: #ff6600;
    font-size: 3rem;
    float: right;
    clear: both;
    position: relative;
    right: 3rem;
    font-weight: bold;
}
.season{
    /* background: #ff7700; */
    color: #333 !important;
    border-radius: .8rem !important;
    font-size: 2.8rem !important;
    padding: 0 .4rem !important;
}
</style>
